<template>
  <div id="container" class="chart"></div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, reactive, getCurrentInstance, defineProps, watch, ref,defineEmits } from "vue";
import { pxToRem } from "@/utils/pxToRem";
import * as echarts from "echarts";
const emit = defineEmits(['dialogData'])
const props = defineProps({
  timeDiscountOnes: Object,
});
watch(
  () => props.timeDiscountOnes,
  (val) => {
    useCharts();
  }
);

// 需要定义defineProps

var myChart: echarts.ECharts;
var option;
onMounted(() => {
  window.addEventListener("resize", () => {
    myChart.resize();
    // myChart.dispose()
    useCharts();
  });
});

var xAxisList;
// 计算合适的间隔

let interval: any;
const useCharts = () => {
  let eData = props.timeDiscountOnes;
  var chartDom = document.getElementById("container");
  myChart = echarts.init(chartDom);

  option = {
    tooltip: {
      backgroundColor: "rgba(67, 128, 240, 0.3)",
      borderColor: "rgba(67, 128, 240, 0.3)", // 设置边框颜色为红色
      borderWidth: 2, // 设置边框宽度
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      //生成的echarts图片和顶部的距离
      top: "25%",
      bottom: "3%", //echarts图片和底部的距离
      left: "1%", //echarts图片和左边的距离
      right: "2%", //echarts图片和右边的间距,
      containLabel: true, //当containLabel:为ture时，以上设置生效
    },

    legend: {
      left: "3%",
      top: "0%",
      icon: "rect",
      textStyle: {
        color: "white",
        fontSize: pxToRem(14),
        lineHeight: pxToRem(14),
        rich: {
          a: {
            verticalAlign: "top", 
          },
        },
        padding: [0, 0, 0, 0],
      },

      itemHeight: pxToRem(18), // 设置icon高度
      itemWidth: pxToRem(30),
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: eData.xAxis,
        axisLabel: {
          interval: interval, // 动态设置间隔,
          textStyle: {
            fontSize: pxToRem(16),
            color: "rgba(151, 171, 234, 1)",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: false,

        axisLabel: {
          textStyle: {
            fontSize: pxToRem(16),
            color: "rgba(151, 171, 234, 1)",
          },
        },
      },
    ],
    series: [
      {
        name: "借款金额",
        type: "line",
        smooth: true,
        symbol: "none", // 设置为 'none' 去掉折线图的点
        areaStyle: {},
        itemStyle: {
          normal: {
            color: "rgba(7,68,153, 1)",
            lineStyle: {
              color: "rgba(7,68,153, 1)",
              width: 1.5,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(7,68,153, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(7,68,153, 0)",
                  },
                ],
              },
            },
          },
        },
        data: eData.lendList,
      },
      {
        name: "还款金额",
        type: "line",
        smooth: true,
        symbol: "none", // 设置为 'none' 去掉折线图的点
        areaStyle: {},
        itemStyle: {
          normal: {
            color: "rgba(43,254,192, 1)",
            lineStyle: {
              color: "rgba(43,254,192, 1)",
              width: 1.5,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(43,254,192, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(43,254,192, 0)",
                  },
                ],
              },
            },
          },
        },
        data: eData.repaymentList,
      },
    ],
  };
  myChart.setOption(option);
  myChart.getZr().on("click", (params) => {
      emit('dialogData',option)
  });
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
.spanRadius1 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: "rgba(7,68,153, 1)";
}
.spanRadius2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: "rgba(43,254,192, 1)";
}
</style>
